<template>
  <div class="fire-inspection-wrap">
    <div class="content-item fire-inspection">
      <div class="content-item-title">防火巡查</div>
      <div class="content-item-wrap">
        <div class="inspection-item no-done">
          <i></i>
          <p class="inspection-title">未完成单位</p>
          <p class="inspection-value blue">{{unfinishCount}}</p>
          <div class="units-icon-wrap">
            <div class="units-icon-item" v-for="(item, index) in unfinishOrgList" :key="index">
              <img v-if="index < 4" :src="item.logo">
              <span v-else-if="index == 4">...</span>
            </div>
          </div>
        </div>
        <div class="inspection-item done">
          <i></i>
          <p class="inspection-title">已完成单位</p>
          <p class="inspection-value black">{{finishCount}}</p>
          <div class="units-icon-wrap">
            <div class="units-icon-item" v-for="(item, index) in finishOrgList" :key="index">
              <img v-if="index < 4" :src="item.logo">
              <span v-else-if="index == 4">...</span>
            </div>
          </div>
        </div>
        <!-- <div class="inspection-pic">
        <div class="unfinish-org" :style="unfinishBgCard">
          <p v-for="item in unfinishOrgList" :key="item.orgId" v-bind:style="{fontSize: item.fontSize}">
            {{item.orgName}}
          </p>
        </div>
        <div class="finish-org" :style="finishBgCard">
          <p v-for="item in finishOrgList" :key="item.orgId" v-bind:style="{fontSize: item.fontSize}">
            {{item.orgName}}
          </p>
        </div>
      </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getTaskOrg } from "@/api/home";

export default {
  name: "FireInspection",
  data() {
    return {
      unfinishCount: "",
      finishCount: "",
      unfinishOrgList: [],
      finishOrgList: [],
      // unfinishBgCard: {},
      // finishBgCard: {}
    };
  },
  created() {
    this.getInspectionData();
  },
  methods: {
    getInspectionData() {
      let that = this;
      let params = {
        orgIds: this.$store.state.userinfo.organizationIds,
      };
      getTaskOrg(params).then((res) => {
        that.unfinishCount = res.data.unfinishCount;
        that.finishCount = res.data.finishCount;
        that.unfinishOrgList =
          res.data.unfinishOrgList.length > 4
            ? res.data.unfinishOrgList.slice(0, 5)
            : res.data.unfinishOrgList;
        that.finishOrgList =
          res.data.finishOrgList.length > 4
            ? res.data.finishOrgList.slice(0, 5)
            : res.data.finishOrgList;
        // that.CalculationUnfinishBgCard()
        // that.CalculationFinishBgCard()
      });
    },
    // 随机字号大小（范围：12-18px）
    randomFontSize() {
      let fontSize = 12 + Math.round(Math.random() * 6) + "px";

      return fontSize;
    },
    joinFontSize(data) {
      let that = this;
      let arr = data;
      let newArr = [];

      for (var i = 0, len = arr.length; i < len; i++) {
        arr[i].fontSize = that.randomFontSize();
        newArr.push(arr[i]);
      }

      return newArr;
    },
    CalculationUnfinishBgCard() {
      let height = 113;
      let proportion =
        Number(this.unfinishCount) /
        Number(this.unfinishCount + this.finishCount);
      this.unfinishBgCard = {
        "background-size": "100% " + Math.floor(height * proportion) + "px",
        "background-position":
          "center " + (245 - Math.floor(height * proportion)) + "px",
      };
    },
    CalculationFinishBgCard() {
      let height = 113;
      let proportion =
        Number(this.finishCount) /
        Number(this.unfinishCount + this.finishCount);
      this.finishBgCard = {
        "background-size": "100% " + Math.floor(height * proportion) + "px",
        "background-position":
          "center " + (113 - Math.floor(height * proportion)) + "px",
      };
    },
    // 更新/刷新模块
    refreshModel(data) {
      let that = this;
      if (Object.keys(data).length > 0) {
        that.unfinishCount = data.unfinishCount;
        that.finishCount = data.finishCount;
        that.unfinishOrgList =
          data.unfinishOrgList.length > 4
            ? data.unfinishOrgList.slice(0, 5)
            : data.unfinishOrgList;
        that.finishOrgList =
          data.finishOrgList.length > 4
            ? data.finishOrgList.slice(0, 5)
            : data.finishOrgList;
      } else {
        that.getInspectionData();
      }
    },
  },
};
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss">
.fire-inspection-wrap {
  .fire-inspection {
    margin: 0;
    width: 250px;
  }
  .fire-inspection .content-item-wrap {
    margin-top: 20px;
    border: 1px solid rgba(189, 189, 189, 0.6);
    padding: 20px;
    width: 250px;
    height: 500px;
  }
  .fire-inspection .inspection-item {
    padding-top: 30px;
    height: 50%;
    box-sizing: border-box;
  }
  .fire-inspection .inspection-item i {
    display: block;
    margin: 14px 15px 0 25px;
    float: left;
    width: 50px;
    height: 50px;
    background: url(../../../assets/images/home/done.png) center center
      no-repeat;
    background-size: 40px;
  }
  .inspection-item.no-done {
    border-bottom: 1px solid #ebebeb;
  }
  .inspection-item.no-done i {
    background-position: center 0;
  }
  .inspection-item.done i {
    background-position: center -58px;
  }
  .fire-inspection .inspection-item .inspection-title {
    color: #999;
    font-size: 16px;
    line-height: 30px;
  }
  .fire-inspection .inspection-item .inspection-value {
    font-size: 30px;
    line-height: 45px;
  }

  .fire-inspection .inspection-pic {
    position: relative;
    overflow: hidden;
    margin-top: 5px;
    border-top: 5px solid #205fa9;
    border-bottom: 5px solid #205fa9;
    width: 210px;
    height: 235px;
  }
  .fire-inspection .unfinish-org,
  .fire-inspection .finish-org {
    position: absolute;
    left: 15px;
    display: flex;
    border: 1px solid #666;
    width: 180px;
    height: 245px;
    flex-direction: column;
    justify-content: center;
  }
  .fire-inspection .unfinish-org {
    top: -132px;
    padding-top: 132px;
    color: #205fa9;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top: none;
    background: url(../../../assets/images/home/unfinish-bg.png) no-repeat;
  }
  .fire-inspection .finish-org {
    top: 113px;
    padding-bottom: 135px;
    color: #333;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom: none;
    background: url(../../../assets/images/home/finish-bg.png) no-repeat;
  }
  .fire-inspection .unfinish-org p,
  .fire-inspection .finish-org p {
    text-align: center;
    margin: 0 5px;
  }

  .fire-inspection .units-icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
  }
  .fire-inspection .units-icon-wrap .units-icon-item {
    margin: 0 5px;
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  .fire-inspection .units-icon-wrap .units-icon-item img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }
}
</style>
